<template>
    <div>
    <!--导航栏开始-->
  <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>生产管理</el-breadcrumb-item>
      <el-breadcrumb-item>工序设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!--导航栏结束-->
    <!--搜索栏开始-->
    <el-form
      style="margin-top: 15px"
      :inline="true"
      :model="queryprocess"
      class="demo-form-inline"
    >
    <el-row>
    <el-col :span="8">
        <el-form-item label="工序编码">
        <el-input
          v-model="queryprocess.processCode"
          placeholder="请输入工序编码"
          clearable   />
      </el-form-item>
      </el-col>
    <el-col :span="8"> 
        <el-form-item label="工序名称">
        <el-input
          v-model="queryprocess.processName"
          placeholder="请输入工序名称"
          clearable
        />
      </el-form-item>
      </el-col>
    <el-col :span="8">
        <el-form-item label="是否启用">
        <el-input
          v-model="queryprocess.enableFlag"
          placeholder="请输入是否启用"
          clearable/>
      </el-form-item>
      </el-col>
  </el-row>      
      <el-form-item>
        <el-button type="primary" @click="searchProcess">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="restProcessess">重置</el-button>
      </el-form-item>
    </el-form>
    <!--搜索栏结束-->
    <!--功能栏开始-->
    <el-button @click="addProcess" type="primary">
        <el-icon><Plus /></el-icon>
        新增
        </el-button>
    <el-button type="warning">
        <el-icon>
        <EditPen /> </el-icon>
        导出</el-button>
    <!--功能栏结束-->
    <!--列表开始-->
    <el-table
      ref="processTable"
      :data="processes"
      max-height="800px"
      stripe="true"
      border="true"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        align="center"
        label="工序编码"
        property="processCode"
      >
      <template #default="scope">
                    <el-link type="success" @click="show(scope.row)">
                       {{ scope.row.processCode }}
                    </el-link>
                </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="工序名称"
        property="processName"
      />
      <el-table-column align="center" label="是否启用" property="enableFlag">
        <template #default="scope">
          <!-- scope.row 就是整行数据-->
          <el-tag
            v-if="scope.row.enableFlag == 'Y'"
            class="ml-2"
            type="success"
            >是</el-tag
          >
          <el-tag
            v-if="scope.row.enableFlag == 'N'"
            class="ml-2"
            type="primary"
            >否</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="备注"
        property="remark"
      />
      <el-table-column width="150" align="center" label="操作">
        <template #default="scope">
                    <el-button size="small" @click="updaterow(scope.row)"><el-icon><EditPen /></el-icon>修改</el-button>
                    <el-button size="small" @click="deleterow(scope.row)"><el-icon><Delete /></el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--列表结束-->
    <!--分页开始-->
    <el-pagination
      style="margin-top: 15px"
      :page-size="processLimit"
      :pager-count="processMaxPage"
      @current-change="changePage"
      layout="prev, pager, next"
      :total="processTotal"
    />
    <!--分页结束-->
    <!--新增工艺设置的弹窗设置开始-->
    <el-dialog
      v-model="addProcessDialogVisible"
      title="添加生产工序"
      width="600"
      align-center
    >
      <el-form
        label-width="100px"
        :model="addProcessData"
        style="max-width: 460px"
      >
      <el-form-item label="工序编码">
          <el-input v-model="addProcessData.processCode"
          placeholder="请输入工序编码" />
          <el-switch
            @change="autoGenProcessCode"
            v-model="autoProcessCode"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
        </el-form-item>
        <el-form-item label="工序名称">
          <el-input
            v-model="addProcessData.processName"
            placeholder="请输入工序名称"
          />
        </el-form-item>
          <el-form-item label="是否启用">
            <el-radio-group v-model="addProcessData.enableFlag" class="ml-4">
           <el-radio label="1" size="large">是</el-radio>
          <el-radio label="2" size="large">否</el-radio>
    </el-radio-group>
        </el-form-item>
        <el-form-item label="工序说明">
          <el-input
          type="textarea"
            v-model="addProcessData.attention"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
          type="textarea"
            v-model="addProcessData.remark"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAddData">取消</el-button>
          <el-button type="primary" @click="doAddData()"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--新增工艺设置的弹窗设置结束-->
    <!---删除工艺设置的弹窗设置开始-->
    <el-dialog v-model="deleteTheTip" title="系统提示" width="600" align-center>
      <template #footer>
        <span class="dialog-footer">
          <el-alert title="是否删除此行数据" type="error" />
          <el-button @click="canceldelete">取消</el-button>
          <el-button type="primary" @click="confirmdelete">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!--删除工艺设置的弹窗设置结束-->
    <!--编辑弹窗设置开始-->
    <el-dialog
      v-model="updateProcessDialogVisible"
      title="添加生产工序"
      width="600"
      align-center
    >
      <el-form
        label-width="100px"
        :model="updateProcessData"
        style="max-width: 460px"
      >
     
        <el-form-item label="工序名称">
          <el-input
            v-model="updateProcessData.processName"
            placeholder="请输入工序名称"
          />
        </el-form-item>
          <el-form-item label="是否启用">
            <el-radio-group v-model="updateProcessData.enableFlag" class="ml-4">
           <el-radio label="1" size="large">是</el-radio>
          <el-radio label="2" size="large">否</el-radio>
    </el-radio-group>
        </el-form-item>
        <el-form-item label="工序说明">
          <el-input
          type="textarea"
            v-model="updateProcessData.attention"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
          type="textarea"
            v-model="updateProcessData.remark"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
     --------------------------------------操作步骤-----------------------------------------
     <el-button @click="addProcessContent" type="primary">
        <el-icon><Plus /></el-icon>
        新增
        </el-button>
    <el-button type="warning">
        <el-icon>
        <EditPen /> </el-icon>
        导出</el-button>
    <!--功能栏结束-->
    <!--列表开始-->
    <el-table
      ref="processContentTable"
      :data="processeContents"
      max-height="800px"
      stripe="true"
      border="true"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        align="center"
        label="顺序编码"
        property="orderNum"
      />
      <el-table-column
        align="center"
        label="步骤说明"
        property="contentText"
      />
      <el-table-column
        align="center"
        label="辅助设备"
        property="device"
      />
      <el-table-column
        align="center"
        label="辅助材料"
        property="material"
      />
      <el-table-column
        align="center"
        label="备注"
        property="remark"
      />
      <el-table-column width="150" align="center" label="操作">
        <template #default="scope">
                    <el-button size="small" @click="updatarow(scope.row)"><el-icon><EditPen /></el-icon>修改</el-button>
                    <el-button size="small" @click="deleteProcessControw(scope.row)"><el-icon><Delete /></el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--列表结束-->
    <!--分页开始-->
    <el-pagination
      style="margin-top: 15px"
      :page-size="processContentLimit"
      :pager-count="processContentMaxPage"
      @current-change="changePage1"
      layout="prev, pager, next"
      :total="processContentTotal"
    />
    <!--分页结束-->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelupdateProcessDialogVisible">取消</el-button>
          <el-button type="primary" @click="doupdateProcessDialogVisible"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--编辑弹窗设置结束-->
    <!--新增工艺步骤的弹窗设置的开始-->
    <el-dialog
      v-model="addProcessContentDialogVisible"
      title="添加生产工序"
      width="600"
      align-center
    >
      <el-form
        label-width="100px"
        :model="addProcessContentData"
        style="max-width: 460px"
      >
      <el-form-item label="顺序编号">
        <el-input-number
            v-model="addProcessContentData.orderNum"
            :min="1"
            :max="1000"
          />
        </el-form-item>
        <el-form-item label="材料URL">
          <el-input
            v-model="addProcessContentData.docUrl"
            placeholder="请输入材料URL"
          />
        </el-form-item>
        <el-form-item label="辅助设备">
          <el-input
            v-model="addProcessContentData.device"
            placeholder="请输入辅助设备"
          />
        </el-form-item>
        <el-form-item label="辅助材料">
          <el-input
            v-model="addProcessContentData.material"
            placeholder="请输入辅助材料"
          />
        </el-form-item>
        <el-form-item label="步骤说明">
          <el-input
          type="textarea"
            v-model="addProcessContentData.contentText"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
          type="textarea"
            v-model="addProcessContentData.remark"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelupdateProcessDialogVisible">取消</el-button>
          <el-button type="primary" @click="doAddContentData()"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--新增工艺步骤的弹窗设置的结束-->
    <!--编辑工艺步骤的弹窗设置的开始-->
    <el-dialog
      v-model="updateProcessContentDialogVisible"
      title="编辑生产工序"
      width="600"
      align-center
    >
      <el-form
        label-width="100px"
        :model="updateProcessContentData"
        style="max-width: 460px"
      >
      <el-form-item label="顺序编号">
        <el-input-number
            v-model="updateProcessContentData.orderNum"
            :min="1"
            :max="1000"
          />
        </el-form-item>
        <el-form-item label="材料URL">
          <el-input
            v-model="updateProcessContentData.docUrl"
            placeholder="请输入材料URL"
          />
        </el-form-item>
        <el-form-item label="辅助设备">
          <el-input
            v-model="updateProcessContentData.device"
            placeholder="请输入辅助设备"
          />
        </el-form-item>
        <el-form-item label="辅助材料">
          <el-input
            v-model="updateProcessContentData.material"
            placeholder="请输入辅助材料"
          />
        </el-form-item>
        <el-form-item label="步骤说明">
          <el-input
          type="textarea"
            v-model="updateProcessContentData.contentText"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
          type="textarea"
            v-model="updateProcessContentData.remark"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelupdateProcessContentDialogVisible">取消</el-button>
          <el-button type="primary" @click="doupdateProcessContentDialogVisible"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--编辑工艺步骤的弹窗设置的结束-->
    <!--展示信息-->
    <el-dialog
      v-model="showProcessDialogVisible"
      title="查看工序信息"
      width="600"
      align-center
    >
    <el-table
      ref="processTable"
      :data="processes"
      max-height="800px"
      stripe="true"
      border="true"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        align="center"
        label="工序编码"
        property="processCode"
      >
      <template #default="scope">
                    <el-link type="success" @click="show(scope.row)">
                       {{ scope.row.processCode }}
                    </el-link>
                </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="工序名称"
        property="processName"
      />
      <el-table-column align="center" label="是否启用" property="enableFlag">
        <template #default="scope">
          <!-- scope.row 就是整行数据-->
          <el-tag
            v-if="scope.row.enableFlag == 'Y'"
            class="ml-2"
            type="success"
            >是</el-tag
          >
          <el-tag
            v-if="scope.row.enableFlag == 'N'"
            class="ml-2"
            type="primary"
            >否</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="备注"
        property="remark"
      />
    </el-table>
     --------------------------------------操作步骤-----------------------------------------
    <!--列表开始-->
    <el-table
      ref="processContentTable"
      :data="processeContents"
      max-height="800px"
      stripe="true"
      border="true"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        align="center"
        label="顺序编码"
        property="orderNum"
      />
      <el-table-column
        align="center"
        label="步骤说明"
        property="contentText"
      />
      <el-table-column
        align="center"
        label="辅助设备"
        property="device"
      />
      <el-table-column
        align="center"
        label="辅助材料"
        property="material"
      />
      <el-table-column
        align="center"
        label="备注"
        property="remark"
      />
    </el-table>
    <!--列表结束-->
    <!--分页开始-->
    <el-pagination
      style="margin-top: 15px"
      :page-size="processContentLimit"
      :pager-count="processContentMaxPage"
      @current-change="changePage1"
      layout="prev, pager, next"
      :total="processContentTotal"
    />
    <!--分页结束-->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="backshowProcessDialogVisible">返回</el-button>
          <el-button type="primary" @click="cancelshowProcessDialogVisible"> 取消 </el-button>
        </span>
      </template>
    </el-dialog>
    </div>
</template>
<script>
import processRequest from "../../../api/pro-process";
import processContentRequest from"../../../api/pro-processContent";
import tools from "../../../util/tools.js";
export default {
    data() {
    return {
        queryprocess:{},//搜索栏对象
        processes:[],//工序列表对象
        processeContents:[],//工序步骤列表对象
        processCurrPage: 1, // 工序页的当前页码
        processLimit: 10, // 工序分页的每页大小
        processTotal: 0, // 工序分页的总条数
        processMaxPage: 10, // 工序分页的最大页码
        processContentCurrPage: 1, // 工序步骤的当前页码
        processContentLimit: 3, // 工序步骤分页的每页大小
        processContentTotal: 0, // 工序步骤分页的总条数
        processContentMaxPage: 10, // 工序分页的最大页码
        addProcessData:{},//新增工序设置
        addProcessDialogVisible:false,//新增工序设置的弹框是否显示
        autoProcessCode:false,//自动生成编号
        deleteTheTip:false,//删除工艺设置的弹窗显示
        deleteProcessCode:null,//删除的工艺设置的编码
        updateProcessDialogVisible:false,//编辑弹窗设置的弹框是否显示
        processCodeData:null,//新增工艺步骤的工艺
        addProcessContentDialogVisible:false,//新增工艺步骤的弹窗提示
        addProcessContentData:{},//新增工序步骤
        addProcessId:null,//新增工艺步骤的工艺Id
        updateProcessContentData:{},//编辑工序步骤
        updateProcessDialogVisible:false,//新增工艺步骤的弹窗提示
        updateProcessContentDialogVisible:false,//修改工艺步骤的弹窗提示
        updateProcessData:{},//编辑工序步骤
        showProcessDialogVisible:false,//展示信息
        showprocessData:{},//展示pro
        
    }
},
methods:{
  /** 取消展示信息*/
  cancelshowProcessDialogVisible(){
    this.showProcessDialogVisible=false;
  },
  /**
   * 返回展示信息
   */
   backshowProcessDialogVisible(){
    this.showProcessDialogVisible=false;
   },
/**
 * 展示信息
 */ 
show(row){
  this.processCodeData=row.processCode;
    this.loadProcessContent();
this.showProcessDialogVisible=true;
},
  cancelupdateProcessContentDialogVisible(){
      this.updateProcessContentDialogVisible=false;
  },
  /**
   * 提交编辑工序步骤
   */
   doupdateProcessDialogVisible(){

    processRequest.updateProcess(this.updateProcessData,(res) => {
        if (res.code == "200") {
          this.$message({
            message: "编辑工序成功",
            type: "success",
          });
          //关闭窗体
          this.updateProcessDialogVisible = false;
          // 重新加载数据
          this.loadprocesss();
          // 将updateProcessData制空
          this.updateProcessData= {};
        } else if(res.code=='500'){
          this.$message({
            message: "编辑失败",
            type: "error",
          });
        }else{
          this.$message({
            message:"工序名称重复",
            type:"warning",
          })
        }
      });
   },
  

  /**
   * 删除工艺步骤
   */
   deleteProcessControw(row){
    this.updateProcessContentData.contentId=row.contentId;
    processContentRequest.deleteProcessContent(this.updateProcessContentData.contentId,(res)=>
    {
      if(res.code=="200"){
        this.$message({
          message:"删除工序步骤成功",
          type:"success",
        });
       this.loadProcessContent();
      }
      else {
        this.$message({
          message:"删除工序步骤失败",
          type:"error",
        })
      }
    })
   },
  /**
   * 提交编辑工艺步骤
   */
  doupdateProcessContentDialogVisible(){
    processContentRequest.updateProcessContent(this.updateProcessContentData,(res) => {
        if (res.code == "200") {
          this.$message({
            message: "编辑工序步骤成功",
            type: "success",
          });
          //关闭窗体
          this.updateProcessContentDialogVisible = false;
          // 重新加载数据
          this.loadProcessContent();
          // 将addProcessContentData制空
          this.updateProcessContentData= {};
        } else if(res.code=='500'){
          this.$message({
            message: "编辑失败",
            type: "error",
          });
        }else{
          this.$message({
            message:"工序步骤名称重复",
            type:"warning",
          })
        }
      });
  },
  /**
   * 编辑新增工艺步骤
   */
   updatarow(row){
   
      this.updateProcessContentDialogVisible=true;
      this.updateProcessContentData.contentId=row.contentId;
      this.updateProcessContentData.orderNum=row.orderNum;
      this.updateProcessContentData.docUrl=row.docUrl;
      this.updateProcessContentData.device=row.device;
      this.updateProcessContentData.material=row.material;
      this.updateProcessContentData.contentText=row.contentText;
      this.updateProcessContentData.remark=row.remark;
   },

  /**
   * 取消修改
   */
   cancelupdateProcessDialogVisible(){
      this.updateProcessDialogVisible=false;
   },
  /**
   * 添加新增工艺步骤
   */
   doAddContentData(){
    processContentRequest.save(this.addProcessContentData,(res) => {
        if (res.code == "200") {
          this.$message({
            message: "添加工序步骤成功",
            type: "success",
          });
          //关闭窗体
          this.addProcessContentDialogVisible = false;
          // 重新加载数据
          this.loadProcessContent();
          // 将addProcessContentData制空
          this.addProcessContentData= {};
        } else if(res.code=='500'){
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }else{
          this.$message({
            message:"工序名称重复",
            type:"warning",
          })
        }
      });
   },
  /**
   * 取消新增
   */
   cancelAddContentData(){
    this.addProcessContentDialogVisible=false;
   },
  /**
   * 新增工艺步骤
   */
   addProcessContent(){
    this.addProcessContentDialogVisible=true;
    this.addProcessContentData.processId=this.addProcessId;
   },
  /**
   * 加载操作步骤
   */
   loadProcessContent(){
   processContentRequest.get(
        this.processContentCurrPage,
        this.processContentLimit,
        this.processCodeData,
        (res) => {
          console.log(res.data.total);
          console.log(res.data.pages);
          // 设置数据
          this.processeContents = res.data.list;
          this.processContentTotal = res.data.total;
          this.processContentMaxPage = res.data.pages;
        }
      );
   },
  /**
   * 编辑工序
   */
   updaterow(row){ 
    this.processCodeData=row.processCode;
    this.loadProcessContent();
    this.updateProcessDialogVisible=true; 
    this.updateProcessData.processId=this.addProcessId;
    this.updateProcessData.processCode=row.processCode;
    this.updateProcessData.processName=row.processName;
    this.updateProcessData.attention=row.attention;
    this.updateProcessData.remark=row.remark;
    processContentRequest.selectByprocessCode(this.processCodeData,(res)=>{
      this.addProcessId=res.data;
    });
   },
  /**删除确认 */
  confirmdelete(){
    processRequest.deleteProcess(this.deleteProcessCode, (res) => {
        if (res.code == "200") {
          console.log(res.code);
          this.loadprocesss();
          this.deleteTheTip=false;
        }
      });
    this.deleteTheTip=false;
  },
  /**
   * 删除取消
   */
   canceldelete(){
      this.deleteTheTip=false;
   },
  /**
   * 删除工序
   */
   deleterow(row){
    this.deleteTheTip=true;
    this.deleteProcessCode=row.processCode;
   },
  /**
   * 提交工序步骤单
   */
   doAddData(){
    processRequest.save(this.addProcessData, (res) => {
        if (res.code == "200") {
          this.$message({
            message: "添加工序成功",
            type: "success",
          });
          //关闭窗体
          this.addProcessDialogVisible = false;
          // 重新加载数据
          this.loadprocesss();
          // 将addProcessData制空
          this.addProcessData= {};
        } else if(res.code=='500'){
          this.$message({
            message: "添加失败",
            type: "error",
          });
          this.addProcessData= {};
        }else{
          this.$message({
            message:"工序名称重复",
            type:"warning",
          })
          this.addProcessData= {};
        }
      });
   },
  /**
   * 取消添加按钮
   */
   cancelAddData(){
    this.addProcessDialogVisible=false;
    this.addProcessData={};
   },
  /**
   * 自动生成工序编码
   */
   autoGenProcessCode(val){
    if (val) {
        processRequest.genProcessCode((res) => {
          this.addProcessData.processCode=res.data
          this.updateProcessData.processCode=res.data
        });
      }
   },
   changePage1(value){
     this.processContentCurrPage=value;
     this.loadProcessContent();
   },
  /**
   * 分页当前页设置
   */
   changePage(value) {
      this.processCurrPage= value;
      this.loadprocesss();
    },
    /**
     * 新增工序设置
     */
     addProcess(){
     this.addProcessDialogVisible=true;
     },
    /**
     * 分页总查询
     */
     loadprocesss(){
        processRequest.get(
        this.processCurrPage,
        this.processLimit,
        (res) => {
          console.log(res.data.total);
          console.log(res.data.pages);
          // 设置数据
          this.processes = res.data.list;
          this.processTotal = res.data.total;
          this.processMaxPage = res.data.pages;
        }
      );
     },
    /**
     * 搜索重置
     */
     restProcessess(){
        processRequest.list(
       this.processCurrPage,
        this.processLimit,
        this.queryprocess={},
        (res) => {
          // 设置数据
          this.processes = res.data.list;
          this.processTotal = res.data.total;
          this.processMaxPage = res.data.pages;
        }
      );
     },
    /**
     * 按条件搜索
     */
     searchProcess(){
      processRequest.list(
       this.processCurrPage,
        this.processLimit,
        this.queryprocess,
        (res) => {
          // 设置数据
          this.processes = res.data.list;
          this.processTotal = res.data.total;
          this.processMaxPage = res.data.pages;
        }
      );
    }
},
mounted(){
this.loadprocesss();
}
}
</script>

<style>

</style>